<extend name="base/index" />

<block name="style">
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="__assets__/global/plugins/jcrop/css/jquery.Jcrop.min.css" rel="stylesheet"/>
<link href="__assets__/admin/pages/css/image-crop.css" rel="stylesheet"/>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME STYLES -->
<link href="__assets__/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
<link href="__assets__/global/css/plugins.css" rel="stylesheet" type="text/css">
<link href="__assets__/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
<link href="__assets__/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
<link href="__assets__/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
<!-- END THEME STYLES -->

</block>

<block name="content">
<!-- BEGIN PAGE CONTAINER -->
<div class="page-container">
	<!-- BEGIN PAGE HEAD -->
	<div class="page-head">
		<div class="container">
			<!-- BEGIN PAGE TITLE -->
			<div class="page-title">
				<h1>剪切图片 <small>按要求剪切照片</small></h1>
			</div>
			<!-- END PAGE TITLE -->
			<!-- BEGIN PAGE TOOLBAR -->
			<div class="page-toolbar">

			</div>
			<!-- END PAGE TOOLBAR -->
		</div>
	</div>
	<!-- END PAGE HEAD -->
	<!-- BEGIN PAGE CONTENT -->
	<div class="page-content">
		<div class="container">
			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
							<h4 class="modal-title">Modal title</h4>
						</div>
						<div class="modal-body">
							 Widget settings form goes here
						</div>
						<div class="modal-footer">
							<button type="button" class="btn blue">Save changes</button>
							<button type="button" class="btn default" data-dismiss="modal">Close</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->
			<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<!-- BEGIN PAGE BREADCRUMB -->
			<ul class="page-breadcrumb breadcrumb">
				<li>
					<a href="#">首页</a><i class="fa fa-circle"></i>
				</li>
				<li>
					<a href="form_image_crop.html">报名</a>
					<i class="fa fa-circle"></i>
				</li>
				<li class="active">
					 剪切照片
				</li>
			</ul>
			<!-- END PAGE BREADCRUMB -->
			<!-- BEGIN PAGE CONTENT INNER -->
			<div class="row">
				<div class="col-md-12">
								<div class="row">
									<div class="col-md-7 responsive-1024">
										<!-- This is the image we're attaching Jcrop to -->
										<img src="{$picture.path}" id="demo8" style="max-width:600px;" alt="Jcrop Example"/>
									</div>
									<div class="col-md-5 responsive-1024">
										<h4>请按要求剪切照片.</h4>
										<p>
											 Hidden form values are set when a selection is made. If you press the <i>Crop Image</i>
											button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it!
										</p>
										<!-- This is the form that our event handler fills -->
										<form action="__SELF__" method="post" id="demo8_form">
											<input type="hidden" id="picid" name="picid"/>
											<input type="hidden" id="crop_x" name="x"/>
											<input type="hidden" id="crop_y" name="y"/>
											<input type="hidden" id="crop_w" name="w"/>
											<input type="hidden" id="crop_h" name="h"/>
											<input type="submit" value="提交" class="btn btn-large green"/>
										</form>
										<!--
										<div class="col-md-6 responsive-1024">

											<div id="preview-pane" style="top: 20px;right:0px;left:0px;">
												<div class="preview-container" style="width: 175px;height: 150px;overflow: hidden;">
													<img src="__assets__/global/plugins/jcrop/demos/demo_files/sago.jpg" class="jcrop-preview" alt="Preview">
												</div>
											</div>
										</div>
										-->
									</div>
								</div>
				</div>
			</div>
			<!-- END PAGE CONTENT INNER -->
		</div>
	</div>
	<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->

</block>

<block name="script">
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="__assets__/global/plugins/jcrop/js/jquery.color.js"></script>
<script src="__assets__/global/plugins/jcrop/js/jquery.Jcrop.min.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="__assets__/global/scripts/metronic.js" type="text/javascript"></script>
<script src="__assets__/admin/layout3/scripts/layout.js" type="text/javascript"></script>
<script src="__assets__/admin/layout3/scripts/demo.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
	// initiate layout and plugins
	Metronic.init(); // init metronic core components
	Layout.init(); // init current layout
	Demo.init(); // init demo features
});

    var demo8 = function() {
        $('#demo8').Jcrop({
          aspectRatio: 1,
          onSelect: updateCoords
        });

        function updateCoords(c)
          {
            $('#crop_x').val(c.x);
            $('#crop_y').val(c.y);
            $('#crop_w').val(c.w);
            $('#crop_h').val(c.h);
          };

          $('#demo8_form').submit(function(){
            if (parseInt($('#crop_w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
            });

    }

    var handleResponsive = function() {
      if ($(window).width() <= 1024 && $(window).width() >= 678) {
        $('.responsive-1024').each(function(){
          $(this).attr("data-class", $(this).attr("class"));
          $(this).attr("class", 'responsive-1024 col-md-12');
        }); 
      } else {
        $('.responsive-1024').each(function(){
          if ($(this).attr("data-class")) {
            $(this).attr("class", $(this).attr("data-class"));  
            $(this).removeAttr("data-class");
          }
        });
      }
    }

	//Metronic.addResizeHandler(handleResponsive);
	//handleResponsive();
	
	demo8();
	
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</block>